<template>
	<view>
	    <view class="lunbotu"><!-- 轮播图 -->
	 		<cu-custom bgColor="bg-gradual-blue">
	 			<block slot="lunbotu">个人技能</block>
	 		</cu-custom>
	 		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
	 			<swiper-item v-for="(item, index) in info" :key="index">
	 				<view :class="item.colorClass" class="swiper-item">
	 					<image class="image" :src="item.url" mode="heightFix" />
	 				</view>
	 			</swiper-item>
	 		</swiper>
	 	</view>
		
		<view><!-- 计数 -->
			<uni-card style="height: 160rpx;">
				<text style="margin-left: 0rpx;font-weight: 700;font-size: 30rpx;">志愿者总数</text>
				<text class="text2">志愿组织总数</text>
				<text class="text2">志愿活动总数</text><br>
				<view style="margin-top: 20rpx;">
					<text style="margin-left: 60rpx;font-weight: 700;font-size: 45rpx;">0</text>
					<text class="text3">0</text>
					<text class="text3">0</text>
				</view>
			</uni-card>
		</view>
		
		<view><!-- 进入其他页面 -->
			<view>
				<navigator url="./Apply">
				<uni-card>
					<image src="../../static/image/voluntary/taiyang.png" style="width: 90rpx;height: 90rpx;"></image>
					<text style="font-weight: 700;font-size: 35rpx;">申请成为志愿者</text>
					<image src="../../static/image/voluntary/dan.png" style="width: 70rpx;height: 70rpx;margin-left: 180rpx;"></image>
				</uni-card>
				</navigator>
			</view>	
			<view style="padding-top: 0rpx;">
				<navigator url="./Shop">
				<uni-card>
					<image src="../../static/image/voluntary/taiyang.png" style="width: 90rpx;height: 90rpx;"></image>
					<text style="font-weight: 700;font-size: 35rpx">爱心积分商店</text>
					<image src="../../static/image/voluntary/dan.png" style="width: 70rpx;height: 70rpx;margin-left: 210rpx;"></image>
				</uni-card>
				</navigator>
			</view>
		</view>
		
		<view><!-- 活动招募 -->
			<text style="font-weight: 700;font-size: 40rpx;margin-left: 30rpx;">活动招募</text>
		</view>
		
		<view><!-- 详情 -->
			<uni-card class="Card">
				<view>
					<view style="height: 300rpx;">
						<image style="height: 70%;width: 38%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						<view class="text1" style="position: absolute;top: 25rpx;">
							<text style="font-weight: 800;font-size: 32rpx;">活动名称</text><br>
							<text class="text4">XX省XX市XX区XX处</text><br>
							<text class="text4" style="position: absolute;top: 78rpx;">志愿者招募人数：20</text>
						</view>
						<view style="position: absolute;top: 150rpx;">
							<button class="button1">活动时长:4h</button>
							<button class="button2" @click="clickCard">报名</button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		
		<view><!-- 详情 -->
			<uni-card class="Card">
				<view>
					<view style="height: 300rpx;">
						<image style="height: 70%;width: 38%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						<view class="text1" style="position: absolute;top: 25rpx;">
							<text style="font-weight: 800;font-size: 32rpx;">活动名称</text><br>
							<text class="text4">XX省XX市XX区XX处</text><br>
							<text class="text4" style="position: absolute;top: 78rpx;">志愿者招募人数：20</text>
						</view>
						<view style="position: absolute;top: 150rpx;">
							<button class="button1">活动时长:4h</button>
							<button class="button2" @click="clickCard">报名</button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		
		<view><!-- 详情 -->
			<uni-card class="Card">
				<view>
					<view style="height: 300rpx;">
						<image style="height: 70%;width: 38%;" mode="aspectFill" src="../../static/image/voluntary/小黑.jpeg" />
						<view class="text1" style="position: absolute;top: 25rpx;">
							<text style="font-weight: 800;font-size: 32rpx;">活动名称</text><br>
							<text class="text4">XX省XX市XX区XX处</text><br>
							<text class="text4" style="position: absolute;top: 78rpx;">志愿者招募人数：20</text>
						</view>
						<view style="position: absolute;top: 150rpx;">
							<button class="button1">活动时长:4h</button>
							<button class="button2" @click="clickCard">报名</button>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					
					indicatorDots: true,
					autoplay: true,
					interval: 2000,//切换的间隔时间
					duration: 500,//滑动动画时长
	
	
					info: [{
							url: '../../static/image/voluntary/taiyang.png',
						},
						{
							url: '../../static/image/voluntary/taiyang.png',
						},
						{
							url: '../../static/image/voluntary/xingxing.png',
						}
					],
					
				}
			},
		onLoad() {

		},
		methods: {
			clickCard() {
						uni.showToast({
							title: '报名成功',
							icon: 'none'
						});
			},
		}
	}
</script>

<style scoped>
        page {
			width: 100%;
			height: 100%;
		}
	
		.lunbotu {
			/* text-align: center; */
			height: 430rpx;
	
		}
	.swiper-box {
		/* width: 95%; */
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F0D3C7;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		/* app上运行不显示图片，就需要加下面这行，设置高度 */
		height: 380upx;
	}
	.image {
		/* width: 750rpx; */
		height: 380upx;
		border-radius: 15upx;
	}
	.Card{
	margin-top: 10rpx;
	height: 250rpx;
	}
	.text1{
		position: absolute;
		top: 50px;
		margin-left: 275rpx;
	}
	.text2{
		margin-left: 40rpx;
		font-weight: 700;
		font-size: 30rpx;
	}
	.text3{
		margin-left: 200rpx;
		font-weight: 700;
		font-size: 45rpx;
	}
	.text4{
		font-size: 12px;
		color: #A5A5A5;
	}
	.button1{
		border-color:#FFFFFF;
		background-color: #FFFFFF;
		color: #ee350b;
		width: 190rpx;
		height: 60rpx;
		font-size: 20rpx;
		position: absolute;left: 270rpx;top: 0rpx;
	}
	.button2{
		border-style:none;
		background-color: #ee350b;
		color: #FFFFFF;
		width: 130rpx;
		height: 70rpx;
		font-size: 28rpx;
		font-weight: 800;
		position: absolute;left: 505rpx;top: 20rpx;
	}
</style>
